  footer {
    background-color: #333 !important;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .footer,
  .footer a {
    color: #999 !important;
  }
  .footer a:hover {
    color: #31A557;
  }
  .footer-info {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 362px;
  }
  .footer-info h3 {
    padding: 18px 0 54px 34px;
  }
  .footer-info li {
    float: left;
    text-align: center;
  }
  .footer-icon {
    display: block;
    width: 46px;
    height: 48px;
    margin: 0 29px 14px;
    background: url(../../resource/static/footer_icons.png) no-repeat;
  }
  .icon-pc {
    width: 37px;
    background-position: -2px 0;
  }
  .footer-info a:hover .icon-pc {
    background-position: -2px -49px;
  }
  .icon-mac {
    background-position: -92px 0;
  }
  .footer-info a:hover .icon-mac {
    background-position: -92px -49px;
  }
  .icon-android {
    width: 37px;
    background-position: -190px 0;
  }
  .footer-info a:hover .icon-android {
    background-position: -190px -49px;
  }
  .icon-iphone {
    width: 34px;
    background-position: -279px 0;
  }
  .footer-info a:hover .icon-iphone {
    background-position: -279px -49px;
  }
  .icon-kg {
    width: 41px;
    background-position: -370px 0;
  }
  .footer-info a:hover .icon-kg {
    background-position: -370px -49px;
  }
  .icon-ss {
    width: 34px;
    background-position: -464px 0;
  }
  .footer-info a:hover .icon-ss {
    background-position: -464px -49px;
  }
  .icon-qp {
    width: 40px;
    background-position: -563px 0;
  }
  .footer-info a:hover .icon-qp {
    background-position: -563px -49px;
  }
  .footer-info__download {
    float: left;
  }
  .footer-info__download .list,
  .footer-info__product .list {
    margin-left: -29px;
  }
  .footer-info__product {
    position: absolute;
    top: 0;
    left: 478px;
    width: 304px;
  }
  .footer-info__product li {
    margin-right: 5px;
    margin-bottom: 18px;
    text-indent: 25px;
  }
  .footer-info__product li.hasPic {
    margin-right: 0;
  }
  .footer-info__link {
    float: right;
    width: 300px;
  }
  .footer-info__link li {
    width: 100px;
    margin-bottom: 22px;
    text-align: left;
  }
  .footer-copyright {
    font-size: 12px;
    text-align: center;
  }
  .footer-copyright p {
    line-height: 30px;
  }
  .footer-copyright a {
    display: inline;
  }
  .footer-copyright span {
    padding: 0 4px;
  }

/* *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --light: hsl(0, 0%, 100%);
  --background: linear-gradient(
    to right bottom,
    hsl(258, 50%, 50%),
    hsl(186, 50%, 50%)
  );

}
a,
a:link {
  font-family: inherit;
  text-decoration: none;
} 
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
background: hsl(0, 0% ,40%,13%);
} 
.modal-container:target {
  display: flex;
}
.modal {
  width: 52rem;
  padding: 4rem 2rem;
  border-radius: 0.8rem;
  color: var(--light);
  background: var(--background);
  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem hsla(236, 50%, 50%, 0.3);
  position: relative;
  overflow: hidden;
}

.modal__text {
  padding: 0 4rem;
  margin-bottom: 4rem;
  font-size: 1.2rem;
  line-height: 2;
}
.modal__text::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 100rem;
  pointer-events: none;
}

.link-2 {
  width: 4rem;
  height: 4rem;
  border: 1px solid hsla(0, 0%, 100%, 0.4);
  border-radius: 100rem;
  color: inherit;
  font-size: 2.2rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
}

.link-2:hover,
.link-2:focus {
  border-color: hsla(0, 0%, 100%, 0.6);
  -webkit-transform: translateY(-0.2rem);
  transform: translateY(-0.2rem);
} */
